<template>
  <a-modal
    v-model:visible="visible"
    modal-class="modal-form-large"
    title-align="start"
    title="分配权限"
    width="30%"
    hight="50%"
    top="10%"
    :body-style="{ 'padding': '16px 16px 0 16px', 'margin-bottom': '16px' }"
    :align-center="false"
    :draggable="true"
    :mask-closable="false"
    :unmount-on-close="true"
    :ok-button-props="{ disabled: loading }"
    :cancel-button-props="{ disabled: loading }"
    :on-before-ok="handlerOk"
    @close="handleClose"
  >
    <a-spin
      class="form-full"
      :loading="loading"
      style="height: 500px; overflow-y: scroll"
    >
      <a-tree
        ref="treeRef"
        v-model:checked-keys="checkedKeys"
        style="margin-right: 20px"
        checked-strategy="all"
        :block-node="true"
        :check-strictly="true"
        :default-expand-selected:="true"
        :checkable="true"
        size="large"
        :data="treeData"
      />
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Message, TreeNodeData } from '@arco-design/web-vue';
  import useVisible from '@/hooks/visible';
  import useLoading from '@/hooks/loading';
  import { getRoleMenus, authRows, UpdateAuthRequest } from '@/api/system/role';

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();
  const treeData = ref<Array<TreeNodeData>>([]);
  const roleId = ref<number>();
  const checkedKeys = ref([]);
  const formModel = ref<UpdateAuthRequest>({});
  const render = (arr: any[]): TreeNodeData[] => {
    return arr
      .map((s) => {
        // 当前节点
        const node = {
          key: s.id,
          title: s.title,
          pid: s.pid,
          sort: s.sort,
          children: undefined as unknown,
        } as TreeNodeData;
        if (s.checked === true) {
          checkedKeys.value.push(s.id);
        }
        // 子节点
        if (s.children && s.children.length) {
          node.children = render(s.children);
        }
        return node;
      })
      .filter(Boolean);
  };
  const getRoleMenu = async (id: number) => {
    const menus = await getRoleMenus(id);

    treeData.value = render(menus.data);
  };
  const open = async (record: any) => {
    roleId.value = record.id;
    // 加载角色菜单
    await getRoleMenu(record.id);
    setVisible(true);
  };

  defineExpose({ open });

  const handlerClear = () => {
    checkedKeys.value = [];
    setLoading(false);
  };
  const renderForm = (record: any) => {
    formModel.value = { ...record };
  };
  // eslint-disable-next-line consistent-return
  const handlerOk = async () => {
    setLoading(true);
    renderForm({
      role_id: roleId,
      menu_id: checkedKeys,
    });
    try {
      //  授权
      await authRows(formModel.value);
      Message.success('操作成功');
      // 清空
      handlerClear();
      return true;
    } catch (e) {
      setLoading(false);
    } finally {
      setLoading(false);
    }
  };
  // 关闭
  const handleClose = () => {
    handlerClear();
  };
</script>

<style scoped></style>
